import React from 'react'
import Transfer from "components/transfer";
import DepartmentTransfer from "components/template/department/department-transfer";

export default {
  key: 'transfer',
  name: 'Transfer 穿梭框',
  author: '吴程龙',
  description: '用于数据的选择交互',
  isExampleFull: true,
  api: [{
    title: 'API',
    data: [{
      param: 'dataSource', description: '数据源', type: 'array', defaultValue: '[]'
    }, {
      param: 'titles', description: '标题。', type: 'array[string || ReactNode]', defaultValue: '[待选列表, 已选列表]'
    }, {
      param: 'style', description: '外边框的style', type: 'Object', defaultValue: '-'
    }, {
      param: 'listStyle', description: '左右内容边框的样式。', type: 'function({direction})', defaultValue: '() => {}'
    }, {
      param: 'render', description: '选项展示的内容。', type: '(record) => ReactNode || string', defaultValue: '-'
    }, {
      param: 'showSearch', description: '是否展示搜索', type: 'bool', defaultValue: 'false'
    }, {
      param: 'searchPlaceholder', description: '搜索框的提示内容', type: 'string', defaultValue: '-'
    }, {
      param: 'onChange', description: '移动的回调', type: 'function(newTargetKeys, direction, newMoveKeys)', defaultValue: '-'
    }, {
      param: 'onSelectChange', description: '选择的回调', type: 'function(targetKeys, selectedKeys)', defaultValue: '-'
    }, {
      param: 'onSearch', description: '搜索的回调', type: 'function(direction, value)', defaultValue: '-'
    }, {
      param: 'rowKey', description: 'key值', type: 'function(item)', defaultValue: '-'
    }, {
      param: 'selectedKeys', description: '已经使用的keys', type: 'Array', defaultValue: '-'
    }, {
      param: 'labelKey', description: '前端搜索用来筛选的属性', type: 'string', defaultValue: '-'
    }, {
      param: 'showSelectAll', description: '是否展示全选', type: 'bool', defaultValue: 'false'
    }, {
      param: 'extraSearch', description: '额外的搜索', type: 'function(direction)', defaultValue: '-'
    }, {
      param: 'searchValue', description: '搜索的值', type: 'function(direction)', defaultValue: '-'
    }],
    description: '其中::direction::有俩个值，::left::和::right::,分别代表左右'
  }, {
    title: 'RenderProps',
    data: [{
      param: 'direction', description: '渲染列表的方向', type: 'left || right', defaultValue: '-'
    }, {
      param: 'dataSource', description: '数据源', type: 'array', defaultValue: '[]'
    }, {
      param: 'onItemSelect', description: '勾选条目', type: 'function(key, selected)', defaultValue: '-'
    }, {
      param: 'filteredRenderItems', description: '搜选后的数据', type: 'object', defaultValue: '-'
    }, {
      param: 'selectedKeys', description: '选中的条目', type: 'Array', defaultValue: '-'
    }],
    description: 'Transfer 支持接收 children 自定义渲染列表，并返回以下参数'
  }],
  example: [
    {
      title: '基础用法',
      description: '传入数据源即可',
      state: {
        data: [
          { id: '111', name: '111' },
          { id: '222', name: '222' },
          { id: '333', name: '333' }
        ],
        targetKeys: []
      },
      getMethod: context => {
        return {
          setVisible: newTargetKeys => {
            context.setState({ targetKeys: newTargetKeys });
          }
        }
      },
      getContent: context => {
        const { data, targetKeys } = context.state;
        return (
          <div>
            <Transfer
              render={'name'}
              rowKey={item => item.id}
              dataSource={data}
              targetKeys={targetKeys}
              onChange={newTargetKeys => context.setVisible(newTargetKeys)}
            />
          </div>
        )
      }
    },
    {
      title: 'RenderProps用法',
      description: 'children用参数来渲染',
      state: {

      },
      getMethod: context => {
        return ({

        })
      },
      getContent: context => {
        return (
          <div>
            <DepartmentTransfer
              value={[]}
            />
          </div>
        )
      }
    }
  ]
}
